<template>
  <div class="container" 
    v-loading="loading"
    element-loading-text="登录中..."
    :element-loading-spinner="svg"
    element-loading-svg-view-box="-10, -10, 50, 50"
    element-loading-background="rgba(122, 122, 122, 0.8)">
    <div class="con_left">
      <div class="con_left_img">
        <div style="font-weight: 600;color: #FFFFFF;font-size:26px;margin: 0px 0 20px  20% ;padding-top: 34%">陕西省商务厅省级以上</div>
         <div style="font-weight: 600;color: #FFFFFF;font-size:26px;margin: 0px 0 20px  20% ;">经开区信息采集填报平台</div>
        <div style="color: #FFFFFF;font-size:13px;margin: 0px 0 20px  20% ;">流程更简单 填报更方便 审批更快捷</div>
      </div>
    </div>
    <div class="con_right" >
      <div class="con_right_con">
        <div style="font-size: 26px;font-weight: 600">用户登录</div>
        <div class="user_con" style="margin-top: 30px">
          <div class="user_con-con">
            <el-input v-model="user" class="inputdeep"  style="width: 300px"  placeholder="用户名" />
          </div>
          <div class="user_con-con mr_t20">
            <el-input v-model="pas" type="password" class="inputdeep" style="width: 300px"  placeholder="密码" />
          </div>
          <div class="user_con-con mr_t20 code-input">
            <el-input v-model="code" placeholder="验证码" style="width: 150px" />
            <div @click="getCodes" class="code-img">
              <authcode  :identifyCode="identifyCode"></authcode>
            </div>
          </div>
        </div>
        <el-button type="success" class="login_btn" style="width: 320px;height:50px;line-height:50px;margin-top:50px;background: #3258DD" @click="loginIn">登录</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import {onMounted,onUnmounted,ref} from "vue"
  import { useRouter } from "vue-router";
  import { getCode,login } from "@/util/api"
  import { useStore } from '@/store'
  import { ElMessage } from 'element-plus'
  const store = useStore()
  const loading = ref(false)
  import authcode from "../components/authcode.vue"
  const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `
  const router = useRouter();
  const user = ref('')
  const pas = ref('')
  const code = ref('')
  const identifyCode = ref('')
  onMounted(()=>{
    getCodes()
    window.addEventListener('keydown', keyDown)
  })
  onUnmounted(() => {
  window.removeEventListener('keydown', keyDown, false)
})
  const getCodes=()=>{
    getCode().then((res:any)=>{
      // console.log(res)
      identifyCode.value = res.data
    })
  }
  const keyDown = (e:any) => {
  //回车则执行登录方法
  if (e.keyCode == 13) {
    loginIn()
  }
}
  const loginIn=()=>{
    let data = {
      username:user.value,
      password:pas.value,
      checkCode:code.value
  }
  if(!data.username)return ElMessage.warning('请输入用户名')
  if(!data.password)return ElMessage.warning('请输入密码')
  if(!data.checkCode)return ElMessage.warning('请输入验证码')
  if(identifyCode.value.toUpperCase()!=data.checkCode.toUpperCase())return ElMessage.error('验证码错误')
    login(data).then((res:any)=>{
      loading.value = true
      if(res.code!='200')return loading.value = false
      console.log(res)
      loading.value = false
      sessionStorage.setItem("token",res.data.token)
      store.commit('setuserInfo',res.data.userInfo)
      if(res.data.notPublishList){
        let list = JSON.parse(JSON.stringify(res.data.notPublishList));
        store.commit('addNotice',list)
      }else{
        store.commit('addNotice','')
      }
      if(res.data.userInfo.userType=='3'){
        router.push('/investment')
      }else if(res.data.userInfo.userType=='4'){
        router.push('/imports')
      }else{
        router.push('/monthReport')
      }
      
    })
  }
</script>

<style scoped lang="scss">
.container{
  width: 100%;
  height: 100%;
  position: relative;
}
.con_left{
  width: 40%;
  height: 100%;
  //background:url('../assets/login_bj.png')  no-repeat ;
  //background-size: 100% 100%;
  overflow: hidden;
  display: inline-block;
}
.con_left_img{
  width:100%;
  height: 100%;
  background:url('../assets/login_bj.png')  no-repeat ;
  background-size: 100% 100%;
}
.con_right{
  width: 60%;
  height: 100%;
  position: absolute;
  display: inline-block;
  left: 32%;
  background: #fff;
}
.con_right_con{
  width: 50%;
  height: 50%;
  /*background: red;*/
  margin:  17% 0 0 40%;
  /*padding-top: 30%;*/
}
.zt{
  font-family: var(--fontStyle);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.mr_t20{
  margin-top:30px ;
}
:deep(.el-input){
  vertical-align: middle;
  width: 90%;
  border: 0;
  height: 42px;
  line-height: 42px;
  //background: rgba(264,245,249);
  background:rgba(255,255,255,0.15);
  //border-bottom: 1px solid rgba(0,0,0,0.15);
  display: inline-block;
  outline: 0;
}
:deep(.el-input__wrapper){
  border: 0;
  width: 100%;
  height: 42px;
  line-height: 42px;
  //background: rgba(264,245,249);
  background:rgba(255,255,255,0.15);
  //border-bottom: 1px solid rgba(0,0,0,0.15);
  display: inline-block;
  outline: 0;
}
:deep(.el-input__inner){
  border: 0;
  width: 100%;
  height: 42px;
  line-height: 42px;
  //background: rgba(264,245,249);
  background:rgba(255,255,255,0.15);
  //border-bottom: 1px solid rgba(0,0,0,0.15);
  display: inline-block;
  outline: 0;
}
:deep(.el-input__inner:focus){
  outline: 0;
  border: 0;
}
  .login_bj{
    width: 100%;
    height: 100%;
    background-image: url(../assets/images/login.png);
    /*background-size: 100%;*/
    background-size:cover;
    background-repeat:no-repeat;
    .user_con{

      margin-top: 100px;
      .user_con-con{
        border-bottom: 1px solid rgba(0,0,0,0.15);
        .user_con_con_img{
          vertical-align: middle;
          //float: left;
          display: inline-block;
          width: 30px;
        }
      }
    }
    .login_con{
      width: 400px;
      height: 50%;
      z-index:11;
      float: right;
      margin: 10% 7% 0 0 ;
      //.login_btn{
      //  margin-top: 100px;
      //  width: 300px;
      //  height: 48px;
      //  font-size: 18px;
      //  background: #0FA779;
      //  border-radius: 24px;
      //}
      .login_con_tl{
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(0,0,0,0.3);
      }
      .login_con_tl1{
        font-size: 38px;
        font-family: var(--fontStyle);
           -webkit-font-smoothing: antialiased;
           -moz-osx-font-smoothing: grayscale;
        color: #0FA779;
        line-height: 40px;
        letter-spacing: 2px;
      }
    }
  }
.code-input{
  display: flex;
  align-items: center;
  .code-img{
    margin-left: 20px;
  }
}
</style>
